<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="/typeUtil"  prefix="typeUtil"%>
    <%@taglib uri="/roomUtil"  prefix="roomUtil"%>
	<c:if test="${empty requestScope.roomList }">
			<center><h1>没有类型信息</h1></center>
	</c:if>
	<c:if test="${!empty requestScope.roomList }">
	<div id="allDiv">
	<!-- 资源管理模块 -->
	<div role="tabpanel" class="tab-pane active" id="sour">
		<div class="check-div form-inline">
			<button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addDiv" id="addButton">添加房间</button>
		</div>
		<div class="data-div">
			<div class="row tableHeader">
				<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
					房间类型
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
					房间名称
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
					楼层
				</div>
				<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
					图片
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
					房间状态
				</div>
				<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
					添加时间
				</div>
				<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
					操作
				</div>
				</div>
				<div class="tablebody">
					<div id="collapseAccount" class="collapse in" aria-expanded="true">
						<c:forEach items="${requestScope.roomList }" var="room">
							<div class="row">
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl1 ">${typeUtil:getTypeName(room.typeId)}
								</div>
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl1 ">${room.name}
								</div>
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl1 ">${room.floor }
								</div>
								<div  class="col-lg-4 col-md-4 col-sm-4 col-xs-4 levl1 "><img id="roomPic${room.id }" onclick='magnify(${room.id})' src='/hotel/upload/${room.pic }' class='roomPic'>
								</div>
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl1 ${room.condi==0?'free':room.condi==1?'busy':'repair'}">${roomUtil:getRoomCondi(room.condi) }
								</div>
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl1 ">${room.addDate }
								</div>
								<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
									<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#addDiv" onclick='changeButtonFun(${room.id})'>修改</button>
									<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="" onclick='deleteButtonFun(${room.id})'>删除</button>
									<c:if test='${room.condi!=1}'>
										<button class="btn btn-danger btn-xs" onclick="repairRoom(${room.id},${room.condi==0?2:0 })">
										<c:if test='${room.condi==2}'>维修完成</c:if>
										<c:if test='${room.condi==0}'>维修</c:if>
										</button>
									</c:if>
								</div>
							</div>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
		<!-- 添加房间菜单 -->
		<div class="modal fade" id="addDiv" role="dialog" aria-labelledby="gridSystemModalLabel">
 			<div class="modal-dialog" role="document">
				<input type="hidden" id="roomId">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="gridSystemModalLabel">添加房间类型</h4>
					</div>
					<div class="modal-body">
						<div class="container-fluid">
							<div class="form-horizontal">
								<div class="form-group ">
									<label for="typeId" class="col-xs-3 control-label">房间类型：</label>
										<div class="col-xs-8 ">
											<select class="form-control input-sm duiqi" id="typeId">
												
											</select>
										</div>
								</div>
								<div class="form-group">
									<label for="name" class="col-xs-3 control-label">房间名称:</label>
									<div class="col-xs-8 ">
										<input type="text" class="form-control input-sm duiqi" id="name" placeholder="">
									</div>
								</div>
								<div class="form-group">
									<label for="floor" class="col-xs-3 control-label">楼层:</label>
									<div class="col-xs-8 ">
										<input type="text" class="form-control input-sm duiqi" id="floor" placeholder="">
									</div>
								</div>
								<div class="form-group">
									<label for="" class="col-xs-3 control-label">图片：</label>
									<div class="col-xs-8">
										<input type="file" id="upload" name="file" accept=".jpg,.png,.jpeg" onchange="xmTanUploadImg(this)" /><br>
										<img id="img1" src="/hotel/upload/default.jpeg" width="200" height="200"/><br>
									</div>
								</div>
								<div class="form-group">
									<label for="zcomment" class="col-xs-3 control-label">备注：</label>
									<div class="col-xs-8">
									<textarea cols="15" rows="10" class="form-control input-sm duiqi" id="zcomment"></textarea><br>
								</div>
							</div>
               			 </div>
                      </div>
                  </div>
                  <div class="modal-footer">
                  	<button type="button" class="btn btn-xs btn-xs btn-white" data-dismiss="modal">取 消</button>
                  	<button type="button" class="btn btn-xs btn-xs btn-green" id="submit">提交</button>
                  	<button type="button" class="btn btn-xs btn-xs btn-green" id="change">修改</button>
				</div>
			</div>
		</div>
	</div>
	</div>
	</c:if>
	<!--页码块-->
	<center>
		<a class="btn btn-xs btn-xs btn-green" onclick='jump("/hotel/room/roomList?page=1")'>#首页
		</a>
		<a class="btn btn-xs btn-xs btn-green" onclick='jump("/hotel/room/roomList?page=${currentPage==1?1:currentPage-1}")'>&lt;上一页
		</a>
		<a class="btn btn-xs btn-xs btn-green" onclick='jump("/hotel/room/roomList?page=${currentPage+1}")'>下一页&gt;
		</a>
	</center>
	<style>
		.free{
			color:green;
		}
		.busy{
			color:yellow;
		}
		.repair{
			color:red;
		}
		.roomPic{
			width:50px;
			height:50px;
		}
		#add{
			display:none;
		}
		#change{
			display:none;
		}
	</style>
	<script src="/hotel/js/jquery.min.js"></script>
	<script src="/hotel/js/layer.js"></script>
	<script src="/hotel/js/jumpUtil.js"></script>
	<script type="text/javascript" src="/hotel/js/ajaxfileupload.js"></script>
	<script type="text/javascript">
	
	tempHtml=''
	function magnify(id){
		tempHtml=$('#allDiv').html()	//临时保存页面
		$('#allDiv').html('<img src="'+$('#roomPic'+id).attr('src')+'" height="800" width="1000" onclick="recoverHtml()">')
		
	}
	function recoverHtml(){
		$('#allDiv').html(tempHtml)
	}
	//判断浏览器是否支持FileReader接口
	  if (typeof FileReader == 'undefined') {
	    alert("<h1>当前浏览器不支持FileReader接口</h1>");
	  } 
	  //选择图片，马上预览
	  function xmTanUploadImg(obj) {
	    var file = obj.files[0];
	    var reader = new FileReader();
	    reader.onload = function(e) {
			//alert(e)
	      var img = document.getElementById("img1");
	      img.src = e.target.result;
			img.width=200;
			img.height=200;
	    }
	    reader.readAsDataURL(file);
	  }
	function clearContent(){
		$('#typeId').val('')
		$('#name').val('');
		$('#floor').val('');
		document.getElementById('img1').src="/hotel/upload/default.jpeg";
		$('#zcomment').text('');
		var obj=document.getElementById('upload');
		obj.outerHTML=obj.outerHTML;
	}
	function setSelect(id){
		$('#typeId').empty()
		$.get("/hotel/room/getRoomTypeNameIdList",{},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}
			types=res.object
			$('#typeId').append('<option value="0" disabled selected>选择房型</option>')
			for(var i=0;i<types.length;i++){
				$('#typeId').append('<option value='+types[i].id+'>'+types[i].name+'</option>')
			}
			$('#typeId').val(id)
		})
	}
	$("#addButton").click(function(){
		$('#gridSystemModalLabel').text('添加房间信息')
		var change=document.getElementById('change')
		change.style.display='none'
		var submit=document.getElementById('submit')
		submit.style.display='inline'
		clearContent()
		setSelect(0)
	})
	$("#submit").click(function(){
		data={"typeId":$("#typeId").val(),"name":$("#name").val(),"floor":$("#floor").val(),
				"pic":"default.jpeg","zcomment":$("#zcomment").val()};
		//alert(JSON.stringify(data))
		$.post("/hotel/room/addRoom.do",data,function(str){	//首先提交文字信息
			var res=eval('(' +str + ')')
			//alert(res.message);
			if(res.code==0){	//如果文字信息提交成功
				var imgurl = document.getElementById("upload").value;	//获取图片url
				if(imgurl=='')	//如果没有图片
					window.location.href="/hotel/system/mainPage"	//直接刷新
			    $.ajaxFileUpload({
			        url:"/hotel/room/uploadRoomPic",
			        fileElementId: "upload", //文件上传域的ID，这里是input的ID，而不是img的
			        dataType: 'json', //返回值类型 一般设置为json
			        data:{"id":res.object},
			        contentType: "application/x-www-form-urlencoded; charset=utf-8",
			        success: function (data) {
			           // alert(data.code+" "+ data.msg);
			            if (data.code==0){	//如果图片上传成功
			                window.location.href="/hotel/system/mainPage"
			            }else{
			            	alert("图片上传失败，原因为"+data.message)
			            	window.location.href="/hotel/system/mainPage"
			            }     
			        }
			    });
					
			}else{
				alert(res.message);
			}
		});
	})
		function changeButtonFun(id){
			$('#gridSystemModalLabel').text('修改房间信息')
			//var add=document.getElementById('add')
			//add.style.display='block'
			var change=document.getElementById('change')
			change.style.display='inline'
			var submit=document.getElementById('submit')
			submit.style.display='none'
			clearContent()
			$.get("/hotel/room/getRoomInfo?id="+id,{},function(res){
				var tn=eval('(' +res + ')').object
				//alert(ad.username)
				$('#roomId').val(tn.id)
				$("#name").val(tn.name)
				//alert($('#typeId').val())
				$('#floor').val(tn.floor);
				setSelect(tn.typeId)
				document.getElementById('img1').src="/hotel/upload/"+tn.pic;
				$('#discount').val(tn.discount)
				$('#zcomment').text(tn.zcomment);
			})
		}
		function deleteButtonFun(id){
			if(confirm("您确定要删除该房间吗？")){
				$.post("/hotel/room/deleteRoom.do",{"id":id},function(str){
					var res=eval('(' +str + ')')
					//alert(res.message);
					if(res.code==0){
						window.location.href="/hotel/system/mainPage"
					}else{
						alert(res.message);
					}
				});
			}
		}
		function repairRoom(id,code){
			if(!confirm('确定修改房间维修情况？'))
				return
			$.post("/hotel/room/repairRoom.do",{"id":id,"code":code},function(str){
				var res=eval('(' +str + ')')
				//alert(res.message);
				if(res.code==0){
					window.location.href="/hotel/system/mainPage"
				}else{
					alert(res.message);
				}
			});
		}
		$("#change").click(function(){
			var changePic=true;
			if(document.getElementById('upload').value==''){
				changePic=false;
			}else{
				changePic=true;
			}
			//alert(change+' '+pic)
			data={id:$('#roomId').val(),"typeId":$("#typeId").val(),"name":$("#name").val(),"floor":$("#floor").val(),
					"pic":"default.jpeg","zcomment":$("#zcomment").val()};
			//alert(JSON.stringify(data))
			$.post("/hotel/room/changeRoomInfo.do",data,function(str){
				var res=eval('(' +str + ')')
				//alert(res.message);
				if(res.code==0){
					if(!changePic){	//如果没有改变图片
		                window.location.href="/hotel/system/mainPage"	//直接刷新
						return;
					}
					var imgurl = document.getElementById("upload").value;
					//alert(imgurl)
				    $.ajaxFileUpload({
				        url:"/hotel/room/uploadRoomPic",
				        fileElementId: "upload", //文件上传域的ID，这里是input的ID，而不是img的
				        dataType: 'json', //返回值类型 一般设置为json
				        data:{"id":res.object},
				        contentType: "application/x-www-form-urlencoded; charset=utf-8",
				        success: function (data) {
				           // alert(data.code+" "+ data.msg);
				            if (data.code==0){
				                window.location.href="/hotel/system/mainPage"
				            }else{
				            	//alert("图片上传失败，原因为"+data.message)
				            	window.location.href="/hotel/system/mainPage"
				            }     
				        }

				    });
						
				}else{
					alert(res.message);
				}
			});
		})
		$("#cancel").click(function(){
			clearContent()
		})
	</script>
</html>